<template><div><h2 id="实验一" tabindex="-1"><a class="header-anchor" href="#实验一"><span>实验一</span></a></h2>
<p>引入js脚本，就立即执行脚本中的内容。href引入</p>
<div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"utf-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>test&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#61AFEF">			alert</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"JS代码引入并执行"</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">// 内联脚本</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">		&#x3C;!-- &#x3C;script src="a.js">&#x3C;/script> 外联脚本会先加载js在执行 --></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		Hello,World!</span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>内联脚本时序图
<img src="https://picx.zhimg.com/v2-d31ac7705fa2590e8919e66054e18cd1_1440w.jpg" alt="图片加载失败">
外联脚本时序图
<img src="https://pica.zhimg.com/v2-d9a5982a54eda847cd8e2b7f2802f3c8_1440w.jpg" alt="图片加载失败"></p>
<h2 id="实验二" tabindex="-1"><a class="header-anchor" href="#实验二"><span>实验二</span></a></h2>
<p>延迟执行script引用的内容</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#7F848E;font-style:italic">// a.js</span></span>
<span class="line"><span style="color:#61AFEF">alert</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"a.js执行"</span><span style="color:#ABB2BF">);</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"utf-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>test&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#D19A66"> defer</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"a.js"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		Hello,World!</span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>defer时序图
<img src="https://picx.zhimg.com/v2-b0fb966ce60a966ea1f346ab3d16d187_1440w.jpg" alt="图片加载失败">
异步执行script引用的内容</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#7F848E;font-style:italic">// a.js</span></span>
<span class="line"><span style="color:#61AFEF">alert</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"a.js执行"</span><span style="color:#ABB2BF">);</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"utf-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>test&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#D19A66"> async</span><span style="color:#D19A66"> src</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"a.js"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		Hello,World!</span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>async时序图
<img src="https://pic2.zhimg.com/v2-cb57f17a380a2e9151fc05abcd9375bb_1440w.jpg" alt="图片加载失败"></p>
<h2 id="实验三" tabindex="-1"><a class="header-anchor" href="#实验三"><span>实验三</span></a></h2>
<p>使用module方式引入和其他方式引入有什么区别?
对于 es 模块脚本，它默认是 defer 方式加载的。也就是说浏览器加载了 a.mjs 之后，还要分析 a.mjs 模块通过 import 导入的其他依赖的模块。分别，如果 a.mjs 还 import 了 b.mjs 和 c.mjs，览器加载 a.mjs 之后，还需要继续加载 b.mjs 和 c.mjs 。只有所有这些依赖模块都分析加载完毕，才能开始执行其中的 js 脚本，而且根据根据 es modules 的规则，浏览器会先执行 b.mjs 中的代码，然后是 c.mjs ，最后才是 a.mjs 的代码。
默认模块defer时序图
<img src="https://pic4.zhimg.com/v2-3b6f3eba82af88fd3849d544342e1f3f_1440w.jpg" alt="图片加载失败">
指定模块async时序图
<img src="https://pic4.zhimg.com/v2-d8fa0e9f7556a1c2da02a3d77250f55b_1440w.jpg" alt="图片加载失败"></p>
<h2 id="补充" tabindex="-1"><a class="header-anchor" href="#补充"><span>补充</span></a></h2>
<p>引入js脚本卡住css加载</p>
<blockquote>
<p>实现思路：写个阻塞js脚本，引入在css加载之前</p>
</blockquote>
<div class="language-javascript line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="javascript" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#56B6C2">&#x3C;!</span><span style="color:#E5C07B">DOCTYPE</span><span style="color:#E06C75"> html</span><span style="color:#56B6C2">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66;font-style:italic"> charset</span><span style="color:#56B6C2">=</span><span style="color:#98C379">"utf-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>test&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF"> ></span></span>
<span class="line"><span style="color:#ABB2BF">			alert("阻塞css加载");</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		</span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66;font-style:italic"> class</span><span style="color:#56B6C2">=</span><span style="color:#98C379">"box"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">			Hello,World!</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		</span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		.box</span><span style="color:#C678DD">{</span></span>
<span class="line"><span style="color:#E06C75">			width</span><span style="color:#ABB2BF">: 200</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E06C75">			height</span><span style="color:#ABB2BF">: 200</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E06C75">			background</span><span style="color:#56B6C2">-</span><span style="color:#E06C75">color</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">red</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">		}</span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">style</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>各个vue组件之间的script标签作用域是否互通，如果不能,怎么实现作用域隔离,在这个过程中let，var变量有什么区别吗</p>
<div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="总结" tabindex="-1"><a class="header-anchor" href="#总结"><span>总结</span></a></h2>
<p>script脚本类型如下：</p>
<ol>
<li>内联脚本</li>
<li>外部脚本
<ol>
<li>普通外部脚本</li>
<li>defer脚本</li>
<li>async脚本</li>
<li>es modules脚本</li>
</ol>
</li>
</ol>
<hr>
<p>附:<br>
html文件解析顺序图<br>
<img src="@source/notes/每周一学/1.第一周学习/html.jpg" alt="图片加载失败"></p>
<blockquote>
<p>参考:<br>
https://zhuanlan.zhihu.com/p/464633848<br>
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script</p>
</blockquote>
</div></template>


